<template>
  <div class="userPwd-container">
    <el-main class="main">
      <el-card class="userPwd-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 14px">重置密码</span>
        </div>
        <el-form
          :model="userPwd"
          :rules="rules"
          ref="userPwdForm"
          label-width="100px"
          class="userPwd-wrapper"
        >
          <el-form-item label="原密码" prop="old_pwd">
            <el-input type="password" v-model="userPwd.old_pwd"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="new_pwd">
            <el-input type="password" v-model="userPwd.new_pwd"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="re_pwd">
            <el-input type="password" v-model="userPwd.re_pwd"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交修改</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import { updatePwdApi } from "@/api/user";
export default {
  name: "userPwd",
  data() {
    let validate_new_pwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("新密码不能为空！"));
      } else {
        // 非空字符串校验
        const reg_new_pwd = /\s+/;
        if (this.userPwd.new_pwd && reg_new_pwd.test(this.userPwd.new_pwd)) {
          return callback(new Error("密码必须是6-15位的非空字符"));
        }
      }
    };
    let validate_re_pwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认新密码！"));
      } else {
        // 非空字符串校验
        const reg_re_pwd = /\s+/;
        if (this.userPwd.re_pwd && reg_re_pwd.test(this.userPwd.re_pwd)) {
          return callback(new Error("密码必须是6-15位的非空字符"));
        } else if (value !== this.userPwd.new_pwd) {
          callback(new Error("两次新密码不一致！"));
        } else {
          callback();
        }
      }
    };
    return {
      userPwd: {
        old_pwd: "",
        new_pwd: "",
        re_pwd: "",
      },
      rules: {
        old_pwd: [
          { required: true, message: "旧密码不能为空！", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "旧密码必须是6-15位的非空字符",
            trigger: "blur",
          },
        ],
        new_pwd: [
          {
            required: true,
            message: "新密码不能为空！",
            trigger: ["change", "blur"],
          },
          {
            min: 6,
            max: 15,
            message: "密码必须是6-15位的非空字符",
            trigger: "blur",
          },
          { validator: validate_new_pwd, trigger: ["blur"] },
        ],
        re_pwd: [
          { required: true, message: "请确认新密码！", trigger: "change" },
          {
            min: 6,
            max: 15,
            message: "密码必须是6-15位的非空字符",
            trigger: "blur",
          },
          { validator: validate_re_pwd, trigger: ["blur"] },
        ],
      },
    };
  },
  created() {},
  methods: {
    async submitForm() {
      console.log("this.userPwd", this.userPwd);
      const res = await updatePwdApi(this.userPwd);
      console.log(res);
      if (res.data.code === 0) {
        this.$refs.userPwdForm.resetFields();
        this.$message.success("更新密码成功！");
      } else {
        this.$message.error("更新密码失败！");
      }
    },
    resetForm() {
      this.$refs.userPwdForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  // margin-right: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.userPwd-card {
  width: calc(100% - 20px);
  height: 345px;
  font-size: 12px !important;
  .el-form-item {
    font-size: 12px !important;
  }
}
::v-deep .el-input__inner {
  width: 400px;
}
</style>